<template>
    <div class="flex flex-col rounded-lg mx-3">
        <div class="flex flex-row justify-center items-center px-2 my-4 gap-4"> 
            <el-select size="large" v-model="conf.usb" value-key="id" placeholder="选择设备"  >
                <el-option v-for="item in usb_options" :key="item.name" :label="item.product" :value="item.name" />
            </el-select>
            <el-button size="large" type="primary" class="w-1/6" @click="list_port"> 刷新</el-button >
            <!-- <el-button size="large" type="danger" class="w-1/6" @click="rcios_disconnect()"> 保存</el-button > -->
        </div>
        <div class="flex justify-between">
            <div class="flex flex-col justify-start h-2/3 w-1/2 mb-1 pt-4 rounded-lg border-2 bg-gray-300">
                <el-text size="large"><el-icon> <Tickets /></el-icon> 墨点1 </el-text>
                <div class="mt-4 h-[calc(5vh+100px)]">
                    <div class="flex flex-row justify-center items-center px-2 my-2 gap-[calc(1vw+1px)]"> 
                        <el-text class="mx-1 w-1/6"></el-text>
                        <el-text class="mx-1 w-1/4">间隔触发数</el-text>
                        <el-text class="mx-1 w-1/4">坏品触发数</el-text>
                        <el-text class="mx-1 w-1/4">功能开启</el-text>
                    </div>
                    <div class="flex flex-row justify-center items-center px-2 my-2 gap-[calc(1vw+1px)]"> 
                        <el-text class="mx-1 w-1/6">上涂胶</el-text>
                        <el-input-number v-model="rconfs[0].glu_gap" :min="0" :max="1000" class="w-1/4"/>
                        <el-input-number v-model="rconfs[0].glu_bad" :min="0" :max="100" class="w-1/4"/>
                        <el-switch v-model="rconfs[0].glu_enable" class="mx-2 w-1/4" size="large" width="80" inline-prompt active-text="打点开启" inactive-text="打点关闭"/>
                    </div>
                    <div class="flex flex-row justify-center items-center px-2 my-2 gap-[calc(1vw+1px)]"> 
                        <el-text class="mx-1 w-1/6">下涂胶</el-text>
                        <el-input-number v-model="rconfs[0].rod_gap" :min="0" :max="1000" class="w-1/4"/>
                        <el-input-number v-model="rconfs[0].rod_bad" :min="0" :max="100" class="w-1/4"/>
                        <el-switch v-model="rconfs[0].rod_enable" class="mx-2 w-1/4" size="large" width="80" inline-prompt active-text="打点开启" inactive-text="打点关闭"/>
                    </div>
                </div>
            <div class="flex flex-row justify-center items-center px-2 mt-4 mb-4"> 
                <el-button size="large" type="primary" class="w-1/6" @click="rcios_getconf(conf.usb,1)" :disabled="connect_state"> 获取设置</el-button >
                <el-button size="large" type="primary" class="w-1/6" @click="rcios_setconf(conf.usb,1)" :disabled="connect_state"> 应用设置</el-button >
            </div>
        </div>
        <div class="flex flex-col justify-start h-90 w-1/2 mb-1 pt-4 rounded-lg border-2 bg-gray-300">
            <el-text size="large"><el-icon> <Tickets /></el-icon> 墨点2</el-text>
            <div class="mt-4 h-[calc(5vh+100px)]">
                <div class="flex flex-row justify-center items-center px-2 my-2 gap-[calc(1vw+1px)]"> 
                        <el-text class="mx-1 w-1/6"></el-text>
                        <el-text class="mx-1 w-1/4">间隔触发数</el-text>
                        <el-text class="mx-1 w-1/4">坏品触发数</el-text>
                        <el-text class="mx-1 w-1/4">功能开启</el-text>
                    </div>
                    <div class="flex flex-row justify-center items-center px-2 my-2 gap-[calc(1vw+1px)]"> 
                        <el-text class="mx-1 w-1/6">上涂胶</el-text>
                        <el-input-number v-model="rconfs[1].glu_gap" :min="0" :max="1000" class="w-1/4"/>
                        <el-input-number v-model="rconfs[1].glu_bad" :min="0" :max="100" class="w-1/4"/>
                        <el-switch v-model="rconfs[1].glu_enable" class="mx-2 w-1/4" size="large" width="80" inline-prompt active-text="打点开启" inactive-text="打点关闭"/>
                    </div>
                    <div class="flex flex-row justify-center items-center px-2 my-2 gap-[calc(1vw+1px)]"> 
                        <el-text class="mx-1 w-1/6">下涂胶</el-text>
                        <el-input-number v-model="rconfs[1].rod_gap" :min="0" :max="1000" class="w-1/4"/>
                        <el-input-number v-model="rconfs[1].rod_bad" :min="0" :max="100" class="w-1/4"/>
                        <el-switch v-model="rconfs[1].rod_enable" class="mx-2 w-1/4" size="large" width="80" inline-prompt active-text="打点开启" inactive-text="打点关闭"/>
                    </div>
                </div>
            <div class="flex flex-row justify-center items-center px-2 mt-4 mb-4"> 
                <el-button size="large" type="primary" class="w-1/6" @click="rcios_getconf(conf.usb,2)" :disabled="connect_state"> 获取设置</el-button >
                <el-button size="large" type="primary" class="w-1/6" @click="rcios_setconf(conf.usb,2)" :disabled="connect_state"> 应用设置</el-button >
            </div>
        </div>
        
    </div>
    <div class="flex flex-col p-2 my-2 rounded-lg border-2 bg-gray-300"> 
        <div class="flex flex-row justify-center items-center px-2 py-4 my-1 rounded-lg border-2"> 
            <el-text class="mr-2 w-1/6 font-bold" size="large">墨点1</el-text>
            <el-text class="mx-1 w-1/4" size="large">启停机次数：{{rcounts[0].count}}</el-text>
            <el-text class="mx-1 w-1/4" size="large">触发次数：{{rcounts[0].total}}</el-text>
            <el-text class="mx-1 w-1/4" size="large">墨点次数：{{rcounts[0].punch}}</el-text>
            <el-button size="large" type="primary" class="w-1/8" @click="rcios_getcount(conf.usb,1)" :disabled="connect_state"> 获取计数</el-button >
                <el-button size="large" type="primary" class="w-1/8" @click="rcios_clearcount(conf.usb,1)" :disabled="connect_state"> 清空计数</el-button >
                </div>
        <div class="flex flex-row justify-center items-center px-2 py-4 my-1 rounded-lg border-2"> 
            <el-text class="mx-1 w-1/6 font-bold" size="large">墨点2</el-text>
            <el-text class="w-1/4" size="large">启停机次数：{{rcounts[1].count}}</el-text>
            <el-text class="w-1/4" size="large">触发次数：{{rcounts[1].total}}</el-text>
            <el-text class="w-1/4" size="large">墨点次数：{{rcounts[1].punch}}</el-text>
            <el-button size="large" type="primary" class="w-1/8" @click="rcios_getcount(conf.usb,1)" :disabled="connect_state"> 获取计数</el-button >
                <el-button size="large" type="primary" class="w-1/8" @click="rcios_clearcount(conf.usb,1)" :disabled="connect_state"> 清空计数</el-button >
                </div>
    </div>
    
</div>

</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
// import { listen } from '@tauri-apps/api/event'
import { Tickets } from '@element-plus/icons-vue';
import { invoke } from '@tauri-apps/api/tauri';
import { ElMessage } from 'element-plus'

const connect_state = ref(false)


interface RciosConnect {usb: string;}
const conf = ref<RciosConnect>({usb: ""});

type Usb = {
    name: string
    product: string
    manufacturer: string
}

const usb_options = ref<Usb[]>([])

interface RCount {
    count:number;
    total: number;
    punch: number;
}

interface RConf {
    glu_enable: boolean;
    rod_enable: boolean;
    glu_gap: number;
    rod_gap: number;
    glu_bad: number;
    rod_bad: number;
}

const rcounts = ref<RCount[]> ([{count:0,total: 0, punch: 0 },{count:0,total: 0, punch: 0 }]);
const rconfs = ref<RConf[]>([{
  glu_enable: false,
  rod_enable: false,
  glu_gap: 0,
  rod_gap: 0,
  glu_bad: 0,
  rod_bad: 0
},{
  glu_enable: false,
  rod_enable: false,
  glu_gap: 0,
  rod_gap: 0,
  glu_bad: 0,
  rod_bad: 0
}]);

async function list_port () {
  let result: Usb[] = await invoke("list_usb_cmd");
  console.log(result)
  usb_options.value = result;
}

async function rcios_getconf(com:string, chan:number) {
    try {
        connect_state.value = true;
        const command = `get_rconf(${chan})`;
        const res:string = await invoke("rcios_read_cmd", { portName: com, command: command });
        console.log(res);

        // 假设 res 是一个有效的 JSON 字符串
        const parsedData = JSON.parse(res);
        if (parsedData && typeof parsedData === 'object' && parsedData.command === command) {
            // 更新 rconfs 数组
            rconfs.value[chan - 1] = { ...rconfs.value[chan - 1], ...parsedData.data };
        }
    } catch (e) {
        console.error("Error invoking rcios_read_cmd:", e);
    } finally {
        connect_state.value = false;
    }
}

async function rcios_setconf(com:string, chan:number) {
    try {
        connect_state.value = true;
        const glu_enable = rconfs.value[chan - 1].glu_enable ? 1 : 0;
        const rod_enable = rconfs.value[chan - 1].rod_enable ? 1 : 0;
        const command = `set_rconf(${chan},${glu_enable},${rconfs.value[chan - 1].glu_gap},${rconfs.value[chan - 1].glu_bad},${rod_enable},${rconfs.value[chan - 1].rod_gap},${rconfs.value[chan - 1].rod_bad})`;
        const res:string = await invoke("rcios_read_cmd", { portName: com, command: command });
        console.log(res);

        // 假设 res 是一个有效的 JSON 字符串
        const parsedData = JSON.parse(res);
        if (parsedData && typeof parsedData === 'object' && parsedData.command === command) {
            // 更新 rconfs 数组
            rconfs.value[chan - 1] = { ...rconfs.value[chan - 1], ...parsedData.data };
            ElMessage({ message: '应用成功', type: 'success', offset:50})
        }
    } catch (e) {
        console.error("Error invoking rcios_read_cmd:", e);
    } finally {
        connect_state.value = false;
    }
}

async function rcios_getcount(com:string, chan:number){
    try {
        connect_state.value = true;
        const command = `get_rcount(${chan})`;
        const res:string = await invoke("rcios_read_cmd", { portName: com, command: command });
        console.log(res);

        // 假设 res 是一个有效的 JSON 字符串
        const parsedData = JSON.parse(res);
        if (parsedData && typeof parsedData === 'object' && parsedData.command === command) {
            // 更新 rconfs 数组
            rcounts.value[chan - 1] = { ...rcounts.value[chan - 1], ...parsedData.data };

        }
    } catch (e) {
        console.error("Error invoking rcios_read_cmd:", e);
    } finally {
        connect_state.value = false;
    }
}

async function rcios_clearcount(com:string, chan:number){
    try {
        connect_state.value = true;
        const command = `clear_rcount(${chan})`;
        const res:string = await invoke("rcios_read_cmd", { portName: com, command: command });
        console.log(res);

        // 假设 res 是一个有效的 JSON 字符串
        const parsedData = JSON.parse(res);
        if (parsedData && typeof parsedData === 'object' && parsedData.command === command) {
            // 更新 rconfs 数组
            ElMessage({ message: '清除成功', type: 'success', offset:50})

        }
    } catch (e) {
        console.error("Error invoking rcios_read_cmd:", e);
    } finally {
        connect_state.value = false;
    }
}



onMounted(() => {
    list_port();
});

</script>

<style scoped>
.empty {
  background-color: aqua;
}
</style>